<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Title</title>
        <script src="../../common/js/vue.2.6.14.min.js"></script>
        <style>
            :root {
                --error-light: #f7dee3;
                --error-light-hover: #f5d2d9;
                --error-light-active: #f2c5ce;
                --error-dark: #d03050;
                --error-dark-hover: #de576d;
                --error-dark-active: #ab1f3f;
                --success-light: #daf0e4;
                --success-light-hover: #cceada;
                --success-light-active: #bfe5d1;
                --success-dark: #18a058;
                --success-dark-hover: #36ad6a;
                --success-dark-active: #0c7a43;
            }

            body * {
                box-sizing: border-box;
                user-select: none;
                font-family: 'Sarasa Mono SC', monospace;
                -webkit-tap-highlight-color: transparent;
            }

            body {
                margin: 0;
                width: 100vw;
                height: 100vh;
                display: flex;
                flex-direction: column;
            }

            #main {
                flex: 1;
                display: flex;
            }

            .type {
                flex: 1;
                display: flex;
                flex-direction: column;
                padding: 1rem;
                text-align: center;
            }

            .clock {
                background-color: #fafefd;
            }

            .loop {
                background-color: #fafdff;
            }

            .countdown {
                background-color: #fdfcff;
            }

            .background {
                flex: 0;
                background-repeat: no-repeat;
                font-size: 10vw;
                color: white;
                text-shadow: none !important;
            }

            .show {
                flex: 2;
                display: flex;
                flex-direction: column;
                justify-content: center;
            }

            .show .time {
                font-size: 10vw;
            }

            .show .date {
                font-size: 2vw;
            }

            .wrapper {
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: center;
            }

            .status {
                font-size: 1.2rem;
                height: 4rem;
            }

            .status.running {
                color: var(--success-dark);
            }

            .status.stopping {
                color: var(--error-dark);
            }

            .option,
            .operation {
                margin-bottom: 1rem;
            }

            input {
                height: 2rem;
                line-height: 2rem;
                width: 15rem;
                margin: 0.3rem;
                padding-left: 0.5rem;
                outline: unset;
                border: 0.01rem solid #e0e0e6;
                border-radius: 0.3rem;
                caret-color: #18a058;
            }

            input:hover {
                border-color: #36ad6a;
            }

            input:focus {
                box-shadow: 0 0 0.2rem 0.1rem #a1d2b6;
            }

            .operation button {
                cursor: pointer;
                display: inline-block;
                width: 5rem;
                height: 2rem;
                line-height: 2rem;
                border: none;
                border-radius: 2rem;
                overflow: hidden;
                font-weight: bold;
            }

            .operation button.run {
                background-color: var(--success-light);
            }

            .operation button.run:hover {
                background-color: var(--success-light-hover);
            }

            .operation button.run:active {
                background-color: var(--success-light-active);
                border-radius: 2rem;
            }

            .operation button.stop {
                background-color: var(--error-light);
            }

            .operation button.stop:hover {
                background-color: var(--error-light-hover);
            }

            .operation button.stop:focus {
                background-color: var(--error-light-active);
            }

            @media screen and (max-width: 1024px) {
                #main {
                    flex-direction: column;
                }

                .type {
                    flex: 1 0 60vh;
                }

                .show .time {
                    font-size: 18vw;
                }

                .show .date {
                    font-size: 8vw;
                }
            }
        </style>
    </head>
    <body>
        <div id="main">
            <div style="position: fixed">{{ doubleTouchTime }}</div>
            <div
                class="type clock"
                v-show="!focus||focus==='clock'"
                @dblclick="focusOne('clock')"
                @touchstart="doubleTouch($event, ()=>focusOne('clock'))"
            >
                <div class="background">CLOCK</div>
                <div class="show">
                    <div class="time">{{ now.hour + ':' + now.minute + ':' + now.second }}</div>
                    <div class="date">{{ now.year + '-' + now.month + '-' + now.day }}</div>
                </div>
            </div>
            <template v-for="item of countdown" :key="item.title">
                <div
                    class="type"
                    :class="item.name"
                    v-show="!focus||focus===item.name"
                    @dblclick.stop.prevent="focusOne(item.name)"
                    @touchstart="doubleTouch($event, ()=>focusOne(item.name))"
                >
                    <div class="background">{{ item.title }}</div>
                    <div class="show">
                        <div class="time">{{ item.remain }}</div>
                    </div>
                    <div class="wrapper">
                        <div class="status running" v-show="item.running">Running</div>
                        <div class="status stopping" v-show="!item.running">Stopping</div>
                        <div class="option" @dblclick.stop.prevent="item">
                            <input type="time" step="1" v-model="item.time" value="00:10:00" />
                            <br />
                            <input type="text" placeholder="提示信息" v-model="item.message" />
                        </div>
                        <div class="operation" @dblclick.stop.prevent="doNothing">
                            <button class="run" v-show="!item.running" @click.stop.prevent="countdownStart(item)">Start</button>
                            <button class="stop" v-show="item.running" @click.stop.prevent="countdownStop(item)">Stop</button>
                        </div>
                    </div>
                </div>
            </template>
        </div>
        <script>
            let debug = true;
            new Vue({
                el: document.getElementById('main'),
                data: () => {
                    return {
                        now: {},
                        focus: undefined,
                        doubleTouchTask: undefined,
                        doubleTouchTime: undefined,
                        countdown: [
                            {
                                name: 'loop',
                                title: 'LOOP',
                                time: '00:10:00',
                                remain: '00:10:00',
                                loop: true,
                                running: false,
                                task: undefined,
                                message: ''
                            },
                            {
                                name: 'countdown',
                                title: 'COUNT',
                                time: '00:10:00',
                                remain: '00:10:00',
                                running: false,
                                loop: false,
                                task: undefined,
                                message: ''
                            }
                        ]
                    };
                },
                mounted() {
                    // this.updateTime();
                    this.now = formatTime(new Date());
                    setInterval(() => {
                        this.now = formatTime(new Date());
                    }, 1000);
                },
                methods: {
                    doNothing() {},
                    updateTime() {},
                    focusOne(type) {
                        if (this.focus) {
                            this.focus = undefined;
                        } else {
                            this.focus = type;
                        }
                    },
                    doubleTouch(e, callback) {
                        let now = new Date().getTime();
                        if (e.target.nodeName === 'DIV') {
                            if (this.doubleTouchTime) {
                                if (now - this.doubleTouchTime < 400) {
                                    setTimeout(callback, 0);
                                }
                                this.doubleTouchTime = undefined;
                            } else {
                                this.doubleTouchTime = now;
                                this.doubleTouchTask = setTimeout(() => {
                                    this.doubleTouchTime = undefined;
                                }, 500);
                            }
                        }
                    },
                    countdownStart(item) {
                        if (item.time === '00:00:00') {
                            return;
                        }
                        let count = 0;
                        let startTime = new Date();
                        item.running = true;
                        item.remain = item.time;
                        item.task = setInterval(() => {
                            let result = this.timeDecrease(item.remain, startTime, count);
                            console.log(result);
                            switch (result.code) {
                                case -1:
                                    this.countdownStop(item);
                                    break;
                                case 0:
                                    // skip
                                    break;
                                case 1:
                                    count = result.count;
                                    item.remain = result.time;
                                    break;
                                case 2:
                                    notify(item.message);
                                    this.countdownStop(item);
                                    if (item.name === 'loop') {
                                        itemStart(true);
                                    }
                                    break;
                            }
                        }, 1000);
                    },
                    countdownStop(item) {
                        item.running = false;
                        item.remain = item.time;
                        if (item.task) {
                            clearInterval(item.task);
                        }
                    },
                    timeDecrease(time, startTime, count) {
                        let split = time.split(':');
                        let hour = parseInt(split[0]);
                        let minute = parseInt(split[1]);
                        let second = parseInt(split[2]);
                        let x = parseInt((new Date().getTime() - startTime) / 1000);
                        let c = x - count;
                        if (x > count) {
                            count = x;
                            if (second > 0) {
                                second -= c;
                            } else if (minute > 0) {
                                minute--;
                                second = 59;
                            } else if (hour > 0) {
                                hour--;
                                minute = 59;
                                second = 59;
                            } else {
                                return { code: 2 };
                            }
                            if (hour === 0 && minute === 0 && second === 0) {
                                return { code: 2 };
                            }
                            return {
                                code: 1,
                                count: count,
                                time: this.numToStr(hour) + ':' + this.numToStr(minute) + ':' + this.numToStr(second)
                            };
                        } else {
                            return {
                                code: 0
                            };
                        }
                    },
                    numToStr(num) {
                        return num > 9 ? num : '0' + num;
                    }
                }
            });

            function formatTime(time) {
                return {
                    year: time.getFullYear(),
                    month: (time.getMonth() + 1 < 10 ? '0' : '') + (time.getMonth() + 1),
                    day: (time.getDate() < 10 ? '0' : '') + time.getDate(),
                    hour: (time.getHours() < 10 ? '0' : '') + time.getHours(),
                    minute: (time.getMinutes() < 10 ? '0' : '') + time.getMinutes(),
                    second: (time.getSeconds() < 10 ? '0' : '') + time.getSeconds()
                };
            }

            function notify(message) {
                if (debug) {
                    console.log('%c Notify ', 'background-color: #6cf; font-size: 1rem', message);
                    return;
                }
                if (window.Notification && Notification.permission === 'granted') {
                    new Notification(message);
                } else {
                    Notification.requestPermission(function (status) {
                        if (Notification.permission !== status) {
                            Notification.permission = status;
                        }
                    });
                }
            }
        </script>
    </body>
</html>
